<template>
  <div class="add-placeOrder-page">
    <a-spin :spinning="loading">
      <a-form ref="formRef" autocomplete="off" name="basic" :model="formState" :label-col="{ style: 'width:80px' }" :wrapper-col="{ style: 'calc(100% - 80px)' }">
        <a-row :gutter="24">
          <a-col :span="24">
            <span class="value-title">运单信息:</span>
          </a-col>
          <a-col :span="12">
            <a-form-item label="运单号" name="waybillNum">
              <span>{{ formState.waybillNum }}</span>
            </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item label="客户公司" name="customerName">
              <span>{{ formState.customerName }}</span>
            </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item label="件数" name="itemNumber">
              <span>{{ formState.itemNumber }}</span>
            </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item label="实重/kg" name="actualWeight">
              <span>{{ formState.actualWeight }}</span>
            </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item label="申报价值" name="declaredValue">
              <span>{{ formState.declaredValue }}</span>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="24" style="margin-bottom: 20px">
            <span class="value-title">货值限制：</span>
          </a-col>
          <template v-for="(item, index) in formState.orderCompanyReqList" :key="index">
            <a-col :span="12">
              <a-form-item label="保险公司" :name="['orderCompanyReqList', index, 'insuranceCompanyId']" :rules="[{ required: true, message: '请选择保险公司!' }]">
                <a-select v-model:value="item.insuranceCompanyId" placeholder="请选择">
                  <a-select-option v-for="e in placeOrderCompanyOpts" :key="e.id" :value="e.id" :label="e.name">{{ e.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="投保金额" :name="['orderCompanyReqList', index, 'insuranceAmount']" :rules="[{ required: true, message: '请输入投保金额!' }]">
                <a-input-number v-model:value="item.insuranceAmount" :min="0" :precision="2" style="width: 100%" />
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item label="保险类型" :name="['orderCompanyReqList', index, 'insuranceType']" :rules="[{ required: true, message: '请选择保险类型!' }]">
                <a-select v-model:value="item.insuranceType" placeholder="请选择">
                  <a-select-option v-for="e in dataDict['INSURANCE_TYPE']" :key="e.code" :value="e.code" :label="e.name">{{ e.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item label="保险性质" :name="['orderCompanyReqList', index, 'insuranceNature']" :rules="[{ required: true, message: '请选择保险保险性质!' }]">
                <a-select v-model:value="item.insuranceNature" placeholder="请选择">
                  <a-select-option v-for="e in dataDict['INSURANCE_NATURE']" :key="e.code" :value="e.code" :label="e.name">{{ e.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item label="保险备注" :name="['orderCompanyReqList', index, 'insuranceRemark']">
                <a-input v-model:value="item.insuranceRemark" />
              </a-form-item>
            </a-col>

            <a-col :span="4" :offset="8" v-if="type === 1">
              <a-button @click="addHandle" style="margin-right: 8px" type="primary"><plus-outlined /></a-button>
              <a-button @click="deleteHandle(index)" v-if="(formState.orderCompanyReqList as []).length > 1" type="primary" danger><minus-outlined /></a-button>
            </a-col>
          </template>
        </a-row>
      </a-form>

      <div class="submit-btn-form-item">
        <a-button :loading="loading" type="primary" @click="onSubmit" v-debounce>保 存</a-button>
        <a-button @click="resetForm">取 消</a-button>
      </div>
    </a-spin>
  </div>
</template>

<script setup lang="ts">
import { toRefs, watch } from "vue";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import { PlusOutlined, MinusOutlined } from "@ant-design/icons-vue";

import CommonHook from "@/hook/commonHook";
import { getDetailkApi } from "@/api/waybillManagement/insurance/placeOrder";

const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: PlaceOrder.ListRows;
    type: number;
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "submit"): void;
  (e: "update:visible", visible: boolean): void;
}>();

const { visible, passData, type } = toRefs(props);
const { dataDict } = CommonHook();
const { tableData, formState, loading, formRef, getCountryApi, placeOrderCompanyOpts } = InitHook({ passData });
const { onSubmit, resetForm, addHandle, deleteHandle } = OperationHook({
  visible,
  passData,
  tableData,
  formState,
  loading,
  formRef,
  emit,
  type
});

const init = () => {
  const { waybillNum, customerName, itemNumber, actualWeight, declaredValue } = passData.value;
  getCountryApi();

  formState.waybillNum = waybillNum;
  formState.customerName = customerName;
  formState.itemNumber = itemNumber;
  formState.actualWeight = actualWeight;
  formState.declaredValue = declaredValue;

  if (type.value === 2) {
    getDetailkApi(passData.value.id).then((res: any) => {
      const { code, data } = res;
      const { insuranceCompanyId, insuranceAmount, insuranceType, insuranceNature, insuranceRemark } = data;
      if (code === 200) {
        formState.orderCompanyReqList[0] = {
          insuranceCompanyId,
          insuranceAmount,
          insuranceType: String(insuranceType),
          insuranceNature: String(insuranceNature),
          insuranceRemark
        };
      }
    });
  }
};

watch(
  () => visible.value,
  v => {
    if (!v) {
      resetForm();
      formState.orderCompanyReqList = [
        {
          insuranceCompanyId: "",
          insuranceAmount: "",
          insuranceType: "",
          insuranceNature: "",
          insuranceRemark: ""
        }
      ];
    } else {
      init();
    }
  }
);
init();
</script>
<style lang="stylus" scoped>
.add-placeOrder-page {
  background-color: #fff;

  .operation-btn-wrapper {
    :deep(.ant-btn ) {
      margin-right: 16px;
    }

    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }

  .value-title{
    font-size 15px
    font-weight:600
  }
}
</style>
